import React, { useMemo, useState, useRef, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { Resizable, ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';
import './drag.css';

const hei = document.documentElement.clientHeight;
const MAX = hei * 0.8;
const MIN = hei * 0.2;
const MID = hei * 0.55;
const Drag = () => {
  const [height, setHeight] = useState(MID);

  const [width, setWidth] = useState(200);
  const [height2, setHeight2] = useState(200);

  const onResize = (event, { element, size, handle }) => {
    setWidth(size.width);
    setHeight2(size.height);
  };

  return (
    <>
      <Resizable width={width} height={height2} onResize={onResize}>
        <div
          className="box"
          style={{
            width: width + 'px',
            height: height2 + 'px',
            background: 'gray',
          }}
        >
          <span>Contents</span>
        </div>
      </Resizable>
      {/* <ResizableBox
        width={300}
        height={200}
        minConstraints={[300, 100]}
        maxConstraints={[300, 300]}
        style={{
          background: 'gray',
        }}
      >
        <span>Contents</span>
      </ResizableBox> */}
      <div
        className="drag-area"
        style={{
          height: height,
        }}
      >
        <div
          className="drag-wrapper"
          onTouchMove={(e) => {
            const drag_h = e.changedTouches[0].clientY;
            const _h = hei - drag_h;
            const h = _h > MAX ? MAX : _h < MIN ? MIN : _h;
            setHeight(h);
          }}
        >
          {height}
        </div>
      </div>
    </>
  );
};

ReactDOM.render(<Drag />, document.getElementById('root'));
